<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <div class="logo">
        <h1>Hi, Richard!</h1>
      </div>
      <div class="user-info">
        <el-dropdown>
          <el-avatar :size="40" src="https://placeholder.co/40" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人设置</el-dropdown-item>
              <el-dropdown-item>学习统计</el-dropdown-item>
              <el-dropdown-item divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 场景选择区域 -->
    <div class="scenes-grid">
      <el-row :gutter="20">
        <el-col
          v-for="scene in scenes"
          :key="scene.id"
          :xs="24"
          :sm="12"
          :md="12"
          :lg="12"
          :xl="12"
        >
          <el-card class="scene-card" @click="enterScene(scene)">
            <img :src="scene.imageUrl" class="scene-image" />
            <h3>{{ scene.name }}</h3>
            <el-progress
              :percentage="calculateProgress(scene)"
              :format="format"
              :status="scene.completed ? 'success' : ''"
            />
            <div class="scene-progress">
              完成: {{ scene.completedCount }}/{{ scene.totalCount }}
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import fruitsImage from '@/assets/images/fruits.jpg'

const router = useRouter()

interface Scene {
  id: string
  name: string
  imageUrl: string
  completedCount: number
  totalCount: number
  completed: boolean
}

// 模拟数据
const scenes = ref<Scene[]>([
  {
    id: '487febf5-0220-45cd-88ba-a493a1cd517f',
    name: '食物',
    imageUrl: fruitsImage,
    completedCount: 3,
    totalCount: 10,
    completed: false,
  },
  {
    id: 'c71d277a-f5a5-4153-86ad-5de034cdd20b',
    name: '水果',
    imageUrl: fruitsImage,
    completedCount: 0,
    totalCount: 8,
    completed: false,
  },
  {
    id: '3',
    name: '旅游出行',
    imageUrl: fruitsImage,
    completedCount: 2,
    totalCount: 12,
    completed: false,
  },
  {
    id: '4',
    name: '学校生活',
    imageUrl: fruitsImage,
    completedCount: 6,
    totalCount: 6,
    completed: true,
  },
])

const calculateProgress = (scene: Scene) => {
  return Math.round((scene.completedCount / scene.totalCount) * 100)
}

const format = (percentage: number) => {
  return percentage === 100 ? '完成' : `${percentage}%`
}

const enterScene = (scene: Scene) => {
  router.push(`/training/${scene.id}`)
}
</script>

<style scoped>
.home-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.progress-overview {
  margin-bottom: 40px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scene-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
  height: 100%;
}

.scene-card:hover {
  transform: translateY(-5px);
}

.scene-image {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin-bottom: 15px;
}

.scene-progress {
  margin-top: 10px;
  color: #606266;
  font-size: 14px;
}

.progress-detail,
.streak-count,
.daily-goal {
  text-align: center;
  font-size: 24px;
  margin-top: 10px;
  color: #409eff;
}

@media (max-width: 768px) {
  .home-container {
    padding: 10px;
  }

  .scene-image {
    height: 150px;
  }
}
</style>
